<!-- 导航详情 -->
<template>
    <div class="search">
        <!-- 课程 -->
        <div class="news-head">
            <div class="item-title-area flex-row">
                <div class="title-side-left flex-row">
                    <div class="line"></div>
                    <div class="broken-line"></div>
                    <div class="dot"></div>
                </div>
                <div class="item-title-text">搜索内容</div>
                <div class="title-side-right flex-row">
                    <div class="dot"></div>
                    <div class="broken-line"></div>
                    <div class="line"></div>
                </div>
            </div>
            <!-- <div class="more"><a href="/zhuanti" target="_blank">更多 &gt;</a></div> -->
        </div>

        <!-- 课程选择 -->


        <div class="course-content" array="">
            <div class="course-row flex-row">
                <div class="course-item" v-for="(item, index) in video_list" :key="item.video_id"
                    @click="toVideoDetail(item.video_id)">
                    <div class="course-item-pic-area"><img :src="item.video_pic"></div>
                    <!-- <div class="course-title">{{ item.video_navigate }}</div> -->
                    <div class="detail">
                        <p>{{ item.video_title }}</p>
                        <div class="video_author">
                            <span>作者：{{ item.video_author }}</span>
                            <span>{{ item.video_create_time }}</span>
                        </div>
                    </div>
                </div>




            </div>

        </div>

    </div>
</template>
  
  
<script>

import { videoSearch } from '../http/request'
export default {

    data() {
        return {
            // 视频列表
            video_list: [],

        }
    },

    created() {
        // 获取对应的id过来
        console.log('导航进来了带文字过来', this.$route.query);
        this.search(this.$route.query.value);

        this.video_text = this.$route.query.value
    },

    // 监听页面路径的变化

    watch: {
        $route: {
            handler(newVal, oldVal) {

                console.log('newVal', newVal);
                this.search(newVal.query.value);


            }
        }
    },

    // 方法
    methods: {
        // 得到导航详情
        search(keyword) {
            console.log('keyword',keyword);
            // return

    
            // let token = localStorage.getItem('useInfo');


            // if (!token) {
            //     token = JSON.parse(token).token

            //     return
            // }

            // token = JSON.parse(token).token

            // console.log('token', token);
            // // 判断是否登录存在信息
            videoSearch({ keyword }).then(res => {
                console.log('res', res);

                this.video_list = res.data.result;
            }).catch(err => {
                console.log('err', err);
            })
        },

        // 点击跳转 视频位置
        toVideoDetail(video_id) {
            this.$router.push({ path: "/videodetail", query: { video_id } })
        }
    }


}
</script>
  
<style lang="scss" scoped>
.search {
    .news-head {
        position: relative;
        width: 1200px;
        margin: auto;

        .item-title-area {
            margin: 0px auto;
            width: 606px;
            height: 30px;
            padding-top: 60px;
            padding-bottom: 30px;
        }

        .title-side-left {
            height: 12px;
            position: relative;
            align-self: flex-start;
        }

        .title-side-left .line {
            width: 200px;
            height: 1px;
            background-color: rgb(6, 79, 244);
            align-self: flex-start;
            margin-right: 13px;
        }

        .title-side-left .broken-line {
            width: 15px;
            height: 1px;
            background-color: rgb(6, 79, 244);
            transform: rotate(45deg);
            align-self: center;
            position: absolute;
            right: 0px;
        }

        .title-side-left .dot {
            height: 6px;
            width: 6px;
            background-color: rgb(6, 79, 244);
            border-radius: 50%;
            align-self: flex-end;
            position: absolute;
            right: 0px;
            bottom: -2px;
        }

        .item-title-text {
            font-size: 30px;
            align-self: center;
            margin: 0px 30px;
        }

        .title-side-right {
            height: 12px;
            position: relative;
            align-self: flex-end;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
        }

        .title-side-right .dot {
            height: 6px;
            width: 6px;
            background-color: rgb(6, 79, 244);
            border-radius: 50%;
            position: absolute;
            align-self: flex-start;
            left: 0px;
            top: -2px;
        }

        .title-side-right .broken-line {
            width: 15px;
            height: 1px;
            background-color: rgb(6, 79, 244);
            transform: rotate(45deg);
            align-self: center;
            position: absolute;
            left: 0px;
        }

        .title-side-right .line {
            width: 200px;
            height: 1px;
            background-color: rgb(6, 79, 244);
            align-self: flex-end;
            margin-left: 13px;
        }


    }

    // .news-head .more {
    //   position: absolute;
    //   right: 60px;
    //   top: 80px;

    //   a {
    //     color: #0068b7;
    //     text-decoration: none;
    //   }
    // }

    .course-row {
        // justify-content: space-between;
        margin-bottom: 25px;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }


    .course-item {
        width: 280px;
        height: 290px;
        padding: 10px;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        position: relative;
        margin-top: 20px;
        margin-right: 26.6px;
        cursor: pointer;

        transition: all .2s linear;


        img {
            width: 100%;
            height: 200px;
        }
    }

    .course-item:hover {
        box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
        transform: translate3d(0, -2px, 0);
    }



    .course-item:nth-child(4n) {
        margin-right: 0;
    }

    .course-item .video_author {
        display: flex;
        justify-content: space-between;

        font-size: 14px;
        color: gray;
        // position: absolute;
        // z-index: 1;
        // top: 0px;
        // left: 0px;
    }

    .course-item .course-title {
        padding-top: 40px;
        margin-left: 20px;
        font-size: 24px;
        line-height: 24px;
        height: 24px;
        font-weight: bold;
        position: relative;
        z-index: 100;
    }

    .course-item .detail {
        // font-size: 14px;
        // height: 14px;
        // line-height: 14px;
        // margin-top: 9px;
        // margin-left: 20px;
        color: red;
        position: relative;

        // top: 144px;
        // z-index: 100;
    }

    .course-item p {
        height: 42px;
        position: relative;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        font-weight: 550;
        margin-bottom: 5px;
        color: #18191ccc;

    }

    .course-item p:hover {
        color: #00aeec;
    }


    .course-item-hover-mask {
        position: absolute;
        width: 100%;
        top: 0px;
        height: 100%;
        left: 0px;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 100;
    }
}
</style>
  